<template>
<div class="content-select">
        <div class="title">为你精选</div>
        <div class="goodsList" >
          <div class="goods-item" v-for="carditem in itemList " :key="carditem.id">
            <div class="picWrap">
              <img :src="carditem.listPicUrl" alt="">
            </div>
            <div class="item-name">
              <img class="preLogo" :src="carditem.preLogo" alt="">
              {{ carditem.name }}
            </div>
            <div class="redPacket">
              <div class="tag">
                <img src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" alt="">
                <span>可用红包</span>
              </div>
            </div>
            <div class="price">
              <span class="prefix">到手</span>
              <span class="main">
                <span>¥</span>
                <span style="font-size:20px;">61</span>
                <span>.9</span>
              </span>
              <span class="old">
                <span>¥99</span>
              </span>
            </div>
            <div class="special">
              <img src="	https://yanxuan.nosdn.127.net/b268d0d2f46c41d3b3edf5fa33eea3de.png" alt="">
              <div class="content">
                <div class="left">
                  <span class="left-title">新人特价</span>
                </div>
                <div class="right">仅剩4天</div>
              </div>
            </div>
            <img class="topLogo" src="https://yanxuan.nosdn.127.net/static-union/16698653574d07eb.png" alt="">
          </div>
        </div>
      </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue"
  export default defineComponent({
    name:'myCard',
  })
</script>

<script lang="ts" setup>
import { onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useCountStore } from "@/stores/home";
const countCard = useCountStore()
const { itemList} = storeToRefs(countCard)

</script>

<style scoped>
/* 为你精选 */
.content-select{
  width: 100%;
}
.content-select .title{
  height:27px;
  font-size: 18px;
  font-weight: 700;
  font-family: PingFang SC Source Han Sans CN;
  margin:10px 0 10px 10px;
  
}
.content-select .goodsList{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
}
.content-select .goodsList .picWrap img{
  width:172.5px;
  height:172.5px;
}
.content-select .goodsList .goods-item{
  position: relative;
  width:172.5px;
}
.content-select .goodsList .goods-item:nth-child(odd){
  padding:0 5px 26px 10px;
}
.content-select .goodsList .goods-item:nth-child(even){
  padding:0 10px 26px 5px;
}
.content-select .goodsList .item-name{
  height:40px;
  width: 100%;
  margin-top:6px;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: #12161c;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow:hidden;
  word-break: break-all;
  text-overflow:ellipsis;
}
.goodsList .item-name .preLogo{
  width: 15px;
  height:15px;
  margin-right:5px;
  vertical-align: -3PX;
}
.goodsList .goods-item .redPacket{
  width: 100%;
  height:15px;
  margin:4px 0;
}
.goods-item .redPacket .tag{
  display: flex;
  align-items: center;
  margin:0 4px 10px 0;
  padding:0 4px 0 2px;
  height:13.5px;
  width: 59px;
  border:1px solid rgba(51,51,51,.2);
  border-radius:50px;
}
.goods-item .redPacket .tag img{
  width: 10px;
  height:10px;
  margin-right:1px;
}
.goods-item .price{
  display: flex;
  align-items:end;
  /* text-align: bottom; */
  height:30px;
  -webkit-box-align: center;
}
.goods-item .price .prefix{
  font-size: 12px;
  font-weight: 700;
  color: #fa1e32;
}
.goods-item .price .main{
  color: rgb(250, 30, 50);
  font-weight: bold;
}
.goods-item .price .old{
  color:rgb(153, 153, 153);
  font-weight: 300;
  text-decoration: line-through;
  margin-left:2px;
}
.goods-item .special{
  height: 23px;
  width: 100%;
  line-height: 23px;
  margin-top:5px;
  padding-left:6px;
  color: #fa1e32;
  background-color: #ffe9eb;
  position: relative;
  border-radius: 50px;
  font-weight: 500;
  box-sizing: border-box;
}
.goods-item .special img{
  width: 10px;
  height:3px;
  position: absolute;
  top:-3px;
  left:20px;
}
.goods-item .special .content{
  display: flex;
  align-items: center;
  max-width:150px;
  height:19px;
  position: absolute;
  top:2px;
  left:2px;
}
.goods-item .special .content .left{
  height:15px;
  background-color: #fa1e32;
  padding:2px 6px;
  border-radius: 50px;
  display:flex;
  align-items: center;
}
.goods-item .special .content .left-title{
  font-size: 12px;
  color: #fff;
  font-weight: 600;
}
.goods-item .special .content .right{
  height:19px;
  line-height: 19px;
  margin-left:4px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.goods-item .topLogo{
  width: 18px;
  height:18px;
  position: absolute;
  top:3px;
  right:4px;
}
</style>